<template>
	<div class="chart">
		<h3 class="title">全国数据</h3>
		<swiper ref="mySwiper" :options="swiperOption">
			<swiper-slide v-for="(slide,index) in quanguoTrendChart" :key="index">
				<!-- <img :src="slide.imgUrl" alt=""> -->
				<!-- <LineCharts :idname="'linechart'+index" :HistoryList="HistoryList"></LineCharts> -->
				<div class="lineChart" :id="'linechart'+index"></div>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
		<ul class="navigator">
			<li @click="changePage(index)" :class="{ active:index === currentIndex }" class="navigatorItem"
				v-for="(item,index) in quanguoTrendChart" :key="index">{{ item.title }}</li>
		</ul>
	</div>
</template>

<script>
	import api from '../api/index.js'
	import $Jquery from 'jquery'
	export default {
		name: "myswiper",
		data() {
			const vm = this;
			return {
				currentIndex: 0,
				swiperOption: {
					on: {
						slideChangeTransitionEnd() {
							vm.currentIndex = this.activeIndex
						}
					}
				},
				quanguoTrendChart: [{
						imgUrl: "https://img1.dxycdn.com/2020/0220/014/3397684583507458039-135.png",
						title: "新增确诊"
					},
					{
						imgUrl: "https://img1.dxycdn.com/2020/0220/697/3397684611424536901-135.png",
						title: "现存疑似"
					},
					{
						imgUrl: "https://img1.dxycdn.com/2020/0220/861/3397684624309439853-135.png",
						title: "累计治愈"
					},
					{
						imgUrl: "https://img1.dxycdn.com/2020/0220/168/3397686703073768694-135.png",
						title: "病死率"
					},
					{
						imgUrl: "https://img1.dxycdn.com/2020/0220/709/3397686724548816431-135.png",
						title: "治愈率"
					}
				],
				cn_conadd: [], //新增疑似 wjw_susadd /新增确诊  cn_conadd
				cn_susNum: [], //现存确诊 cn_econNum /现存疑似  cn_susNum
				cn_cureNum: [], //死亡 cn_deathNum /治愈 cn_cureNum
				cn_deathRate: [], //病死率
				cn_cureRate: [], //治愈率
				linedate: [], //日期
			}
		},
		mounted() {
			// // 传统写法 vue-resource 的jsonp方式可以解决跨域问题，但是由于请求的数据是js的返回方式，所以就用$.getgetScript()获取
			// this.$http.jsonp(api.getHistoryListData1()).then(function(response) {
			// 	// 响应成功回调
			// 	console.log(response);
			// }, function(response) {
			// 	// 响应错误回调
			// 	console.log(response);
			// });
			var _this = this;
			$Jquery.getScript(api.getHistoryListData1());
			window.jsoncallback = function(res) {
				console.log(res);
				for (var i = 0; i < res.data.historylist.length; i++) {
					if (i <= 10) {
						_this.cn_conadd.push(res.data.historylist[i].cn_conadd);
						_this.cn_susNum.push(res.data.historylist[i].cn_susNum);
						_this.cn_cureNum.push(res.data.historylist[i].cn_cureNum);
						_this.cn_deathRate.push(res.data.historylist[i].cn_deathRate);
						_this.cn_cureRate.push(res.data.historylist[i].cn_cureRate);
						_this.linedate.push(res.data.historylist[i].date);
					}
				}
				_this.$charts.line("linechart0", _this.cn_conadd, _this.linedate, 100000);
				_this.$charts.line("linechart1", _this.cn_susNum, _this.linedate, 100000);
				_this.$charts.line("linechart2", _this.cn_cureNum, _this.linedate, 500000);
				_this.$charts.line("linechart3", _this.cn_deathRate, _this.linedate, 50);
				_this.$charts.line("linechart4", _this.cn_cureRate, _this.linedate, 50);
			}

			// api.getHistoryListData().then(res => {
			// 	console.log(res.data);
			// 	res.data = JSON.parse(res.data.split("jsoncallback(")[1].split(");")[0]);
			// 	for (var i = 0; i < res.data.data.historylist.length; i++) {
			// 		if (i <= 10) {
			// 			this.cn_conadd.push(res.data.data.historylist[i].cn_conadd);
			// 			this.cn_susNum.push(res.data.data.historylist[i].cn_susNum);
			// 			this.cn_cureNum.push(res.data.data.historylist[i].cn_cureNum);
			// 			this.cn_deathRate.push(res.data.data.historylist[i].cn_deathRate);
			// 			this.cn_cureRate.push(res.data.data.historylist[i].cn_cureRate);
			// 			this.linedate.push(res.data.data.historylist[i].date);
			// 		}
			// 	}
			// 	this.$charts.line("linechart0", this.cn_conadd, this.linedate, 100000);
			// 	this.$charts.line("linechart1", this.cn_susNum, this.linedate, 100000);
			// 	this.$charts.line("linechart2", this.cn_cureNum, this.linedate, 500000);
			// 	this.$charts.line("linechart3", this.cn_deathRate, this.linedate, 50);
			// 	this.$charts.line("linechart4", this.cn_cureRate, this.linedate, 50);
			// }).catch(error => {
			// 	console.log(error);
			// });
		},
		methods: {
			changePage(index) {
				this.currentIndex = index // 高亮
				this.$refs.mySwiper.swiper.slideTo(index, 1000, false) // swiper切换
			}
		}
	}
</script>

<style scoped>
	.chart {
		position: relative;
		background: #fff;
		padding: 0.16rem 0;
		overflow: hidden;
	}

	.chart .title {
		font-size: 0.16rem;
		text-align: center;
	}

	.chart .swiper-pagination {
		position: absolute;
		text-align: center;
		-webkit-transition: 300ms opacity;
		-o-transition: 300ms opacity;
		transition: 300ms opacity;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		z-index: 10;
	}

	.chart .swiper-pagination-bullet {
		width: calc(20% - 0.02rem);
		text-align: center;
		background: #f7f7f7;
		padding: 0.045rem;
		box-sizing: border-box;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.02rem;
	}

	.navigator {
		font-size: 0.12rem;
		list-style: none;
		display: flex;
		padding: 0 0.16rem;
		justify-content: center;
		margin: 0.06rem 0 0;
	}

	.navigatorItem {
		color: #4169e2;
		background: #f1f5ff;
		position: relative;
		width: calc(20% - 0.02rem);
		text-align: center;
		background: #f7f7f7;
		padding: 0.045rem;
		box-sizing: border-box;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.02rem;
		margin-left: 0.025rem;
	}

	.active {
		color: #4169e2;
		background: #f1f5ff;
		position: relative;
	}

	.lineChart {
		width: 3.75rem;
		height: 3rem;
		margin: 0rem auto;
	}
</style>
